<template>
  <div>
    <el-input ref="scoreInput" v-model="selectValue" size="small" :disabled="disabled" clearable @focus="focus" @clear="clear" />
    <el-dialog :visible="visible" append-to-body :title="$t('rule.occurrence')" width="1000px" @close="onClose" @open="onOpen">
      <el-table stripe v-if="'PFMEA'=== appId" :data="tableData" :height="600" highlight-current-row @row-dblclick="dblclick">
        <el-table-column :label="$t('rule.operate')" width="90" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="toSelect(scope.row.scoreNumber)">{{ $t('rule.select') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('rule.potentialFrequencyOfTheProcess')" align="center">
          <el-table-column
            :label="$t('rule.content')"
            align="center"
          >
            <el-table-column prop="scoreNumber" label="O" align="center" width="60" />
            <el-table-column prop="preventDesc" :label="$t('rule.occurrencePrediction')" width="100" :show-overflow="false" :edit-render="{autofocus: '.vxe-input--inner'}" />
            <el-table-column prop="descOne" :label="$t('rule.controlType')" width="190" :show-overflow="false" :edit-render="{autofocus: '.vxe-input--inner'}" />
            <el-table-column prop="descTwo" :label="$t('rule.preventiveControl')" :show-overflow="false" :edit-render="{autofocus: '.vxe-input--inner'}" />
          </el-table-column>
          <el-table-column :label="$t('rule.blank')">
            <el-table-column prop="customOne" :label="$t('rule.companyOrProductLineExample')" :show-overflow="false" :edit-render="{autofocus: '.vxe-input--inner'}" />
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-table stripe v-if="'DFMEA'=== appId" :data="tableData" :height="600" highlight-current-row @row-dblclick="dblclick">
        <el-table-column :label="$t('rule.operate')" width="90" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="toSelect(scope.row.scoreNumber)">{{ $t('rule.select') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('rule.potentialFrequencyOfTheProcess')" align="center">
          <el-table-column :label="$t('rule.content')" align="center">
            <el-table-column prop="scoreNumber" label="D" align="center" width="60" />
            <el-table-column prop="preventDesc" :label="$t('rule.occurrencePrediction')" align="center" width="150" />
            <el-table-column prop="descOne" :label="$t('rule.frequencyStandardDF')" width="200" />
          </el-table-column>
          <el-table-column :label="$t('rule.blank')">
            <el-table-column prop="customOne" :label="$t('rule.companyOrProductLineExample')" />
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-table stripe v-if="'MFMEA'=== appId" :data="tableData" :height="600" highlight-current-row @row-dblclick="dblclick">
        <el-table-column :label="$t('rule.operate')" width="90" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="toSelect(scope.row.scoreNumber)">{{ $t('rule.select') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('rule.potentialFrequencyOfTheProcess')" align="center">
          <el-table-column :label="$t('rule.content')" align="center">
            <el-table-column prop="scoreNumber" label="D" align="center" width="60" />
            <el-table-column prop="preventDesc" :label="$t('rule.occurrencePrediction')" align="center" width="150" />
            <el-table-column prop="descOne" :label="$t('rule.frequencyStandardDF')" width="200" />
          </el-table-column>
          <el-table-column :label="$t('rule.blank')">
            <el-table-column prop="customOne" :label="$t('rule.companyOrProductLineExample')" />
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getTmRuleOccurrenceByPid } from '@/api/fmea/common/project'

import rule from './mixins/rule'

// P/D/M 发生度选择通用组件
export default {
  name: 'RuleOccurrenceSelect',
  mixins: [rule],
  methods: {
    onOpen() {
      if (this.tableData.length === 0) {
        getTmRuleOccurrenceByPid(this.projectId).then(res => {
          this.tableData = res.data
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
